import { cancelOrder, payOrder } from '@/service/apis/order';
import { View, Text, Image, Button } from '@tarojs/components';
import Taro from '@tarojs/taro';
import { AtIcon } from 'taro-ui';
import { payOrderUtils, getOrderStatus } from '../../utils';
import './style.scss';

const OrderItem = ({ orderInfo, onHandle }) => {
  const {
    store_name,
    store_logo,
    goods_pic_url,
    goods_name,
    store_id,
    number,
    order_price,
    order_sn,
    order_type,
    order_pay,
    orderStatus,
    add_time,
  } = orderInfo;
  // 取消订单
  const cancel = (e: any) => {
    e.stopPropagation();
    Taro.showModal({
      title: '取消确认',
      content: '订单还未付款，确认取消吗',
      cancelText: '再考虑下',
      confirmText: '取消订单',
      confirmColor: '#f82256',
      success: async function (res) {
        if (res.confirm) {
          console.log('取消订单');
          try {
            await cancelOrder({
              order_sn,
            });
            Taro.showToast({
              title: '订单取消成功',
              duration: 2000,
            });
          } catch (error) {
            Taro.showToast({
              title: '订单取消失败',
              duration: 2000,
            });
          }
        } else if (res.cancel) {
          console.log('用户点击取消');
        }
      },
    });
  };
  // 确认订单
  const confirm = async (e: any) => {
    e.stopPropagation();
    try {
      const { data } = await payOrder({
        order_sn,
      });
      const payParams = {
        pay_config: data.pay_config,
        type: order_type,
        orderCode: order_sn,
        price: order_price,
      };
      if (data.pay_config) {
        payOrderUtils(payParams);
      }
    } catch (err) {
      Taro.showToast({
        title: err?.message,
        icon: 'none',
      });
    }
  };
  // 查看店铺详情
  const lookUpShop = () => {
    Taro.navigateTo({
      url: `/subPages/shop/list?id=${store_id}`,
    });
  };
  const orderStatusMap = {
    1: '待付款',
    2: '待收货',
    3: '已完成',
    4: '已取消',
    5: '退款审核中',
    6: '已退款'
  };
  return (
    <View className="order-item-wrap" onClick={onHandle}>
      <View className="item-top" onClick={lookUpShop}>
        <View className="shop-wrap">
          <Image mode="aspectFit" src={store_logo} />
          <Text>{store_name}</Text>
          <AtIcon value="chevron-right" color="#CCCCCC" size={14} />
        </View>
        <Text className="order-status">{orderStatusMap[orderStatus]}</Text>
      </View>
      <View className="order-info">
        <Image mode="aspectFit" className="product-img" src={goods_pic_url} />
        <View className="product-text">
          <Text className="title">{goods_name}</Text>
          {/* <Text className="desc">{desc}</Text> */}
          <View className="price-count">
            <Text className="price">￥{order_price}</Text>
            <Text className="count">x{number}</Text>
          </View>
        </View>
      </View>
      <View className="pay-price-wrap">
        <Text className="pay-price">下单日期：{add_time}</Text>
        {orderStatus === 4 ? (
          <Text className="pay-price">
            已取消
          </Text>
        ) : (
          <Text className="pay-price">
            {orderStatus === 1 || (order_pay === 1 && orderStatus !== 3) ? '需' : '已'}付款:{order_price}
          </Text>
        )}
      </View>
      {orderStatus === 1 && (
        <View className="operation-wrap">
          <Button onClick={cancel} className="cancel">
            取消订单
          </Button>
          <Button onClick={confirm} className="confirm">
            去支付
          </Button>
        </View>
      )}
    </View>
  );
};
export default OrderItem;
